import './index.css'





interface Props {
  title1?: string;
  title2: string;
}

const defaultProps:Partial<Props> = {
  title1: "默认标题1"
}

const Card:React.FC<Props> = (props) => {
    const { title1, title2 } = {...defaultProps, ...props}
  return (
    <div className="card">
      <header>
        <div>{title1}</div>
        <div>{title2}</div>
      </header>
      <main>内容区域</main>
      <footer>
        <button>确认</button>
        <button>取消</button>
      </footer>
    </div>
  );
}






// interface Props {
//   title1?: string;
//   title2: string;
// }

// const Card:React.FC<Props> = ({title1="默认标题", title2}) => {
//   return (
//     <div className="card">
//       <header>
//         <div>{title1}</div>
//         <div>{title2}</div>
//       </header>
//       <main>内容区域</main>
//       <footer>
//         <button>确认</button>
//         <button>取消</button>
//       </footer>
//     </div>
//   );
// }

export default Card;
